<template>
    <div style="background-color: #F5F7F9;">
        <div style="margin-top:3px;" class="theme">
            <div class="theme_top">
                <h2>最新排行榜课程</h2>
                <p>本专区根据中国舞蹈排行榜当期内容即时更新，囊括最新热门舞蹈作品视频课、直播课。</p>
            </div>
            <div class="theme_nav">
                <el-row>
                    <el-col :span="3" style="font-size:14px; color:#B1B5C1; text-align:center;">{{nav[0]?.label}}:
                    </el-col>
                    <el-col :span="21">
                        <div class="flex justify-space-between mb-4 flex-wrap gap-4">
                            <el-button class="elb" link v-for="(val,index) in nav[0]?.choises" :key="index"
                                @click="navHandle(index)" :class="{'active': flag == index}">{{val.name}}
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div>
                <div class="allSort">
                    <div class="sort">
                        <div class="sortItem">
                            <span>综合排序</span>
                            <!-- <span>综合</span> -->
                        </div>
                        <div class="sortItem">
                            <span>销量</span>
                            <!-- <span>销量由高到低</span> -->
                        </div>
                        <div class="sortItem">
                            <span>浏览量</span>
                            <!-- <span>浏览量由高到底</span> -->
                        </div>
                        <div class="sortItem">
                            <span class="down">
                                价格&nbsp;<i><svg t="1666107258874" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="3130" width="14" height="14">
                                        <path
                                            d="M512.726547 675.318646c-8.063653 0-15.790638-3.245927-21.435195-9.006118L231.175103 400.906809c-11.603269-11.837606-11.410887-30.840402 0.427742-42.442648 11.837606-11.601222 30.841426-11.410887 42.442648 0.427742l238.681054 243.534596L751.407602 358.891903c11.601222-11.839653 30.602995-12.033058 42.442648-0.427742 11.839653 11.603269 12.031011 30.605042 0.427742 42.442648L534.161742 666.312528C528.517185 672.072719 520.791224 675.318646 512.726547 675.318646z"
                                            p-id="3131"></path>
                                    </svg></i>
                            </span>
                            <!-- <div>
                                <span>价格由高到低</span>
                                <span>价格由低到高</span>
                            </div> -->
                        </div>
                        <div class="sortItem">
                            <span>发布时间</span>
                            <!-- <span>发布时间由近及远</span> -->
                        </div>
                    </div>
                </div>
            </div>

            
        </div>

        <VideoCardModule></VideoCardModule>
    </div>
</template>

<script setup lang="ts">
import { fa } from 'element-plus/es/locale';
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue';
import { getThemeNav } from '../../../api/themeApi/themeItem/themeItem'
import swm from '../../../stores/swm'

import { userStore } from "../../../store/lxcStore"
const store = userStore()
onMounted(() => {
	store.getHomeBanner()
})


let useStores = swm()
const id = useRoute().query
const flag = ref(0)
const pageSize = ref(20)

let nav = ref<any>([])
onMounted(() => {
    getNav()
    useStores.getVideoList(pageSize.value) 
})
const getNav = async () => {
    let rs = await getThemeNav(id)
    nav.value = rs
}
const navHandle = (index) => {
    flag.value = index
}

</script>

<style scoped>
.theme {
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.theme_top {
    height: 175px;
    background: url("../../../assets/images/bg.jpg");
    background-size: 101% 101%;
    background-repeat: no-repeat;
    padding-top: 20px;
}

.theme_top h2 {
    padding: 30px 35px;
}

.theme_top p {
    margin-left: 30px;
}

.theme_nav {
    width: 1200px;
    height: 87px;
    margin-top: 10px;
    background: #FFFFFF;
    line-height: 87px;
}

.elb {
    width: 69px;
    height: 31px;
    margin: 0 20px;
}

.active {
    background: #F93684 !important;
    color: #FFFFFF !important;
}

.yingyingying {
    width: 1200px;
    height: 300px;
    background-color: aqua;
    margin: 0 auto;
}

.allSort {
    width: 100%;
    height: 68px;
    padding: 20px 0;
}

.sort {
    width: 1200px;
    height: 68px;
    background-color: white;
    margin: 0 auto;
    box-sizing: border-box;
}

.sort .down i {
    vertical-align: middle;
}

.sortItem {
    font-size: 14px;
    line-height: 68px;
    display: inline-block;
    margin: 0 40px;
}
</style>